import React, { useEffect, useState } from 'react'
import { View, Image } from '@tarojs/components'
import DataTime from './components/DateTime'
import Container from '../Container'
import Taro from "@tarojs/taro";
import Router from '@/utils/router'
import { fetchListGoodsSecKillByIds } from '@/server/shop'
import './index.scss'
const RenderTime = (props) => {
    const { data } = props
    const { preheatFlag, price, secKillPrice, secKillTag, secKillStartTime, secKillEndTime, secKillStock, preheatHour } = data

    let nowTime = parseInt(new Date().getTime() / 1000);
    let startTime = parseInt(new Date(secKillStartTime.replace(/-/g, '/')).getTime() / 1000)
    let endTime = parseInt(new Date(secKillEndTime.replace(/-/g, '/')).getTime() / 1000)
    if (nowTime >= startTime && nowTime <= endTime) {
        return <View className='channel-color'>
            <DataTime type='start' preheatFlag={preheatFlag} startTime={secKillStartTime} endTime={secKillEndTime}></DataTime>
        </View>
    } else if (
        nowTime >= endTime
    ) {
        return <View className='channel-color-before'>已结束</View>
    } else if (preheatFlag === '1' && nowTime < startTime && (preheatHour * 60 * 60) > (startTime - nowTime)) {
        return <View className='channel-color'>
            <DataTime type='before' startTime={secKillStartTime} endTime={secKillEndTime}></DataTime>
        </View>

    } else {
        return <View className='channel-color-before'>未开始</View>
    }

}
const filterStatus = (data) => {

    const { preheatFlag, price, secKillPrice, secKillTag, secKillStartTime, secKillEndTime, secKillStock, preheatHour } = data
    let nowTime = parseInt(new Date().getTime() / 1000);
    let startTime = parseInt(new Date(secKillStartTime.replace(/-/g, '/')).getTime() / 1000)
    let endTime = parseInt(new Date(secKillEndTime.replace(/-/g, '/')).getTime() / 1000)
    if (nowTime >= startTime && nowTime <= endTime) {
        return '1'
    } else if (
        nowTime >= endTime
    ) {
        return '2'
    } else {
        return '3'
    }
}
const renderStaus = (val) => {
    const { preheatFlag, price, secKillPrice, secKillTag, secKillStartTime, secKillEndTime, secKillStock, preheatHour } = val
    let nowTime = parseInt(new Date().getTime() / 1000);
    let startTime = parseInt(new Date(secKillStartTime.replace(/-/g, '/')).getTime() / 1000)
    let endTime = parseInt(new Date(secKillEndTime.replace(/-/g, '/')).getTime() / 1000)
    if (filterStatus(val) === '1') {
        return '马上抢'
    } else if (filterStatus(val) === '2') {
        return '已结束'
    } else {
        return '未开始'
    }
}
const RenderStyle = (props) => {
    const { data = {}, linkGo } = props
    const { list = [], remianFlag, activeTypeFlag, top, bottom, countType, goodsNameStatus, goodsDescStatus, priceFlag, oldPriceFlag } = data
    const [renderList, setRenderList] = useState([])
    const fetchList = goodsIds => {
        fetchListGoodsSecKillByIds({
            secKillIds: goodsIds
        }).then(val => {
            const { secKillList } = val
            setRenderList(secKillList)
        })
    }
    useEffect(() => {
        if (list.length > 0) {
            const newList = list.filter(val => {
                const { secKillStock, } = val
                if (remianFlag && activeTypeFlag) {
                    if (secKillStock > 0 || filterStatus(val) === '1') {
                        return true
                    }
                    return false
                } else if (remianFlag) {
                    return secKillStock > 0
                }
                else if (activeTypeFlag) {
                    return filterStatus(val) === '1'
                }
                else {
                    return true
                }
            }).map(val => {
                return val.id
            })
            if (newList.length > 0) {
                fetchList(newList.toString())
            }

        }
    }, [JSON.stringify(list)])
    if (countType === 'list') {
        return <View className='wxPage_SecondKill_style1'>
            {renderList.map(val => {
                const { goodsName, goodsCover, secKillName, secKillPrice } = val
                return <View onClick={() => {
                    Router('shopDetail', {
                        args: {
                            goodsId: val.goodsId
                        },
                    })
                }} className='list-style-list'>
                    <View className='item-image'>
                        <Image style={{ width: '100%', height: "100%", }} mode="aspectFill" src={goodsCover}></Image>
                    </View>
                    <View className='item-info'>
                        <View className='item-info-titleOne'>{secKillName}</View>
                        <View className=''><RenderTime data={val} ></RenderTime></View>
                        <View className='item-price'>
                            <View className='price'>￥{secKillPrice}</View>
                            <View disabled={filterStatus(val) === '1'} className='type-button'> {renderStaus(val)} </View>
                        </View>
                    </View>
                </View>
            })}
        </View>
    }
    else if (countType === 'bigImage') {
        return <View className='wxPage_SecondKill_style2'>
            {renderList.map(val => {
                const { goodsName, goodsCover, secKillName, secKillPrice } = val
                return <View onClick={() => {
                    Router('shopDetail', {
                        args: {
                            goodsId: val.goodsId
                        },
                    })
                }} className='list-style-list'>
                    <View className='item-image'>
                        <Image style={{ width: '100%', height: "100%", }} mode="aspectFill" src={goodsCover}></Image>
                    </View>
                    <View className='item-info'>
                        <View className='item-info-titleOne'>{secKillName}</View>
                        <View className=''><RenderTime data={val} ></RenderTime></View>
                        <View className='item-price'>
                            <View className='price'>￥{secKillPrice}</View>
                            <View disabled={filterStatus(val) === '1'} className='type-button'> {renderStaus(val)} </View>
                        </View>
                    </View>
                </View>
            })}
        </View>
    }
    else if (countType === 'twoList') {
        return <View className='wxPage_SecondKill_style3'>
            {renderList.map(val => {
                const { goodsName, goodsCover, secKillName, secKillPrice } = val
                return <View onClick={() => {
                    Router('shopDetail', {
                        args: {
                            goodsId: val.goodsId
                        },
                    })
                }} className='list-style-list'>
                    <View className='item-image'>
                        <Image style={{ width: '100%', height: "100%", }} mode="aspectFill" src={goodsCover}></Image>
                    </View>
                    <View className='item-info'>
                        <View className='item-info-titleOne'>{secKillName}</View>
                        <View className=''><RenderTime data={val} ></RenderTime></View>
                        <View className='item-price'>
                            <View className='price'>￥{secKillPrice}</View>
                            <View disabled={filterStatus(val) === '1'} className='type-button'> {renderStaus(val)} </View>
                        </View>
                    </View>
                </View>
            })}
        </View>
    } else if (countType === 'leftScroll') {
        return <View className='wxPage_SecondKill_style4'>
            <View className='slide-area'>
                {renderList.map(val => {
                    const { goodsName, goodsCover, secKillName, secKillPrice } = val
                    return <View onClick={() => {
                        Router('shopDetail', {
                            args: {
                                goodsId: val.goodsId
                            },
                        })
                    }} className='list-style-list'>
                        <View className='item-image'>
                            <Image style={{ width: '100%', height: "100%", }} mode="aspectFill" src={goodsCover}></Image>
                        </View>
                        <View className='item-info'>
                            <View className='item-info-titleOne'>{secKillName}</View>
                            <View className=''><RenderTime data={val} ></RenderTime></View>
                            <View className='item-price'>
                                <View className='price'>￥{secKillPrice}</View>
                                <View disabled={filterStatus(val) === '1'} className='type-button'>{renderStaus(val)}</View>
                            </View>
                        </View>
                    </View>
                })}
            </View>

        </View>
    }
}

const FormRender = (props) => {
    const { data = {}, linkGo } = props
    const { list = [], paddingTop = 0, paddingLeft = 0, top = 0, bottom = 0, showMore, titleFlag
    } = data
    return <Container linkGo={() => {
        Taro.setStorageSync('secondKillList', list)
        Router('secondKillList')
    }} hasTitle={titleFlag
    } {...props}>
        <RenderStyle {...props}></RenderStyle>
    </Container>
}
export default FormRender